{% extends "base.html" %}

{% load humanize i18n page_metadata_tags %}

{% block metadata %}
    {% translate "Readiness" as trans_title %}
    {% page_metadata page_title=trans_title %}
{% endblock metadata %}

{% block body %}
    <div class="container">
        <div class="row">
            <div class="pt-8 pb-4 col-lg-12">
                <h1 class="text-6xl font-bold">
                    {{ release.product.title }} {{ release.cycle }} Readiness
                </h1>
                {% if release.is_eol %}
                    <div class="py-4 px-4 text-4xl text-black bg-yellow-300">
                        <span>🚧</span>
                        {{ release.product.title }} {{ release.cycle }} support expired on {{ release.eol }}.
                    </div>
                {% endif %}
                <div>{{ release.product.title }} {{ release.cycle }} support graph for the {{ packages|length }} most popular {{ release.product.title }} packages!</div>
                <h2>How do you identify {{ release.product.title }} {{ release.cycle }} support?</h2>
                <p>We look for the <code>{{ ready_condition }}</code> classifier on the latest release of the project.</p>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <h2 class="pb-4 text-4xl font-medium">{{ product_slug }} Release {{ cycle }}</h2>
                <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                    {% for package in packages %}
                        <div class="px-4 py-2 rounded rounded-xl
                                    {% if package.is_ready == 'yes' %}bg-green-500 text-gray-900
                                    {% elif package.is_ready == 'maybe' %}bg-yellow-200 text-gray-900
                                    {% else %}bg-gray-100 text-gray-100{% endif %}">
                            <a class="text-gray-900" href="{% url 'package' slug=package.slug %}">
                                <span class="font-bold rounded rounded-3xl">#{{ forloop.counter }}</span>
                                <span class="underline">{{ package.title }} ({{ package.pypi_downloads|intcomma }} downloads)</span>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        {% include "includes/_readiness-footer.html" %}
    </div>
{% endblock body %}
